<template>
	<view class="content">
		<view class="list">
			<view class="list-item h">
				<view class="label">头像1</view>
				<view class="value" @click="chooseImage(1)">
					<image :src="userinfo.avatar" mode="aspectFill" class="avatar"></image>
					<image src="/static/index/right.png" class="right-icon" mode=""></image>
				</view>
			</view>
			<view class="list-item h">
				<view class="label">主页背景图</view>
				<view class="value" @click="chooseImage(2)">
					<image :src="userinfo.bg_img" mode="aspectFill" class="avatar"></image>
					<image src="/static/index/right.png" class="right-icon" mode="aspectFill"></image>
				</view>
			</view>
			<view class="list-item">
				<view class="label">用户名</view>
				<view class="value">
					<input type="text" class="input" v-model="userinfo.nickname" />
				</view>
			</view>
			<view class="list-item">
				<view class="label">年龄</view>
				<view class="value">
					<input type="number" class="input" v-model="userinfo.age" />
				</view>
			</view>
			<view class="list-item">
				<view class="label">手机</view>
				<view class="value">
					<text class="input" >{{ userinfo.mobile }}</text>
				</view>
			</view>
			<view class="list-item">
				<view class="label">性别</view>
				<view class="value">
					<view class="sex" @click="selectSex(1)">
						<image src="/static/index/pitchon1.png" mode="aspectFill" v-if="userinfo.sex == 1" class="img1"></image>
						<image src="/static/index/unselected.png" mode="aspectFill" v-else class="img1"></image>
						<text>男</text>
					</view>
					<view class="sex" @click="selectSex(2)">
						<image src="/static/index/pitchon1.png" mode="aspectFill" v-if="userinfo.sex == 2" class="img1"></image>
						<image src="/static/index/unselected.png" mode="aspectFill" v-else class="img1"></image>
						<text>女</text>
					</view>
					<!-- <view class="sex" @click="selectSex(0)">
						<image src="/static/index/pitchon1.png" mode="" v-if="userinfo.sex == 0" class="img1"></image>
						<image src="/static/index/unselected.png" mode="" v-else class="img1"></image>
						<text>保密</text>
					</view> -->
				</view>
			</view>
			<!-- 简介 -->
			<view class="textarea">
				<textarea placeholder="请输入您的个人简介" placeholder-class="pClass" v-model="userinfo.dec"></textarea>
			</view>
		</view>
		<view class="btn" @click="submit">保存</view>

		<permissionGuide ref="refPermissionGuide" />
	</view>
</template>
<script>
	import {
		host
	} from '@/siteinfo.js'
	import permissionGuide from "@/components/permissionGuide/index.vue"
	export default {
		components: {
			permissionGuide
		},
		data() {
			return {
				userinfo: '',
				action: ''

			}
		},
		onLoad() {
			this.action = host + '/api/user/up_img'
			this.getInfo()
		},
		methods: {
			async getInfo() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/index/GetUser'
					})
					this.userinfo = result.data.data.userinfo
				} catch (e) {
					this.msg(e.data.msg)
				}

			},
			// 上传头像
			chooseImage(type) {
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album", type);
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera", type);
						}
					}
				})
			},
			handleChooseImage(sourceType, type) {
				this.$uniApiBaseChooseImage({
					count: 1,
					sourceType: [sourceType],
				}).then((res) => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.uploadFile(res.tempFilePaths[0], type)
				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},
			uploadFile(filePath, type) {
				uni.uploadFile({
					url: this.action, //仅为示例，非真实的接口地址
					filePath,
					name: 'file',
					formData: {
						'token': uni.getStorageSync('token'),
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						if (type == 1) {
							this.userinfo.avatar = data.data.file
						} else if (type == 2) {
							this.userinfo.bg_img = data.data.file

						}
						uni.hideLoading();

					}
				});
			},
			selectSex(index) {
				this.userinfo.sex = index
			},
			async submit() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/user/set',
						data: {
							nickname: this.userinfo.nickname,
							avatar: this.userinfo.avatar,
							sex: this.userinfo.sex,
							dec: this.userinfo.dec,
							age: this.userinfo.age,
							tags: '',
							voc: '',
							bg_img: this.userinfo.bg_img,
							vocsen: '',
							vovnew: ''
						}
					})
					console.log(result)
					this.msg(result.data.msg)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)

				} catch (e) {
					this.msg(e.data.msg)
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #efefef;
		height: calc(100vh - 44px);

		.list {
			.list-item {
				border-bottom: 1px solid #d1d1d1;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 109rpx;
				background: #ffffff;

				.label {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
				}

				.value {
					display: flex;
					align-items: center;

					.avatar {
						width: 112rpx;
						height: 112rpx;
						border-radius: 50%;
					}

					.right-icon {
						width: 14rpx;
						height: 24rpx;
						margin-left: 26rpx;
					}

					.input {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: right;
					}

					.sex {
						display: flex;
						align-items: center;

						.img1 {
							width: 26rpx;
							height: 26rpx;
							margin-left: 32rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 500;
							color: #999999;
							margin-left: 10rpx;
						}
					}
				}

			}

			.h {
				height: 174rpx;
			}
		}

		.textarea {
			margin: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx;
			color: #333333;

			.pClass {
				font-size: 32rpx;
				font-weight: 400;
				color: #CCCCCC;
			}
		}

		.btn {
			height: 98rpx;
			background: linear-gradient(270deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 20rpx;
			position: absolute;
			bottom: 24rpx;
			left: 30rpx;
			right: 30rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
		}
	}
</style>